<template>
    <el-card >
      <span>新增文章</span> 
       <el-form :model="aticleData" ref="aticleData" label-position="left" style="margin-top:50px;margin-bottom:50px;" label-width="180px">
            <el-form-item label="请输入标题" prop="name">
                <el-input style="width:60%" v-model="aticleData.name"></el-input>
            </el-form-item>
            <el-form-item label="请选择文章类型" prop="articleType">
              <el-select placeholder="请选择" v-model="aticleData.articleType">
                <el-option label="新闻动态展示" value="1"></el-option>
                <el-option label="政策法规" value="2"></el-option>
                <el-option label="通知通告" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请编辑文章内容" prop="content">
              <quill-editor class="editor" ref="myQuillEditor" v-model="aticleData.content"></quill-editor>
            </el-form-item>
            <el-form-item style="margin-top:100px;">
              <el-button type="primary" icon="el-icon-edit-outline" @click="submitAticle">发布</el-button>
            </el-form-item>
        </el-form>
        
    </el-card>
</template>
<script>
import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import Quill from 'quill'
  import {quillEditor} from 'vue-quill-editor'
  import ImageResize from 'quill-image-resize-module' //添加
  Quill.register('modules/imageResize', ImageResize) //添加
  import config from "@/config/config"
  import store from '@/vuex/store'
  import {addnewsInfoApi,updatenewsInfoApi} from "@/api/newsInfoApi";
  import {getUserAccount} from "@/api/userApi";
 
    export default {
        data() {
            return{
                    //表格数据
                    aticleData: 
                    {
                        id:"",
                        name:"",
                        createTime:"",
                        releaseAccount:"",
                        updateTime:"",
                        state:"",
                        articleType:"",
                        content:""
                    }
                    
                }
        },
        created:function(){
          getUserAccount(store.getters.username).then(res=>{
            this.aticleData.releaseAccount=res.data.data.loginName;
          })
          this.editCheck();
        },
        methods:{
          editCheck(){
            if (this.$route.query) {
              this.aticleData.id=this.$route.query.id;
              this.aticleData.name=this.$route.query.name;
              this.aticleData.articleType=this.$route.query.articleType;
              this.aticleData.releaseAccount=this.$route.query.releaseAccount;
              this.aticleData.content=this.$route.query.content;
            } 
            
          },
            //发布文章
            submitAticle(){
               if (this.$route.query.id==null||this.$route.query.id=="undefined"){
                addnewsInfoApi(this.aticleData)
                .then(res=>{
                    this.$message.success(res.data.respondMessage);
                    this.$router.push({
                        path: "/newsInformation"
                    });
                }).catch(res=>{
                    this.$message.error(res.data.respondMessage);
                })
              }else if (this.$route.query.id!=null||this.$route.query.id!=""){
                //发送修改请求
                updatenewsInfoApi(this.aticleData).then(res=>{
                    this.$message.success(res.data.respondMessage);
                    this.$router.push({
                        path: "/newsInformation"
                    });
                }).catch(res=>{
                    this.$message.error(res.data.respondMessage);
                })
              }
               
            }
        }
    }
</script>
<style>
  .editor {
    line-height: normal !important;
    height: 600px;
  }

  .ql-snow .ql-tooltip[data-mode="link"]::before {
    content: "请输入链接地址:";
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "保存";
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
  }


  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体";
  }
</style>
<style scoped>
  @import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>